<template>
  <div id="shopping">
    <div v-if="isScal" class="all">
      <div class="banner">
        <!-- <img src="../../assets/shouye.png" alt=""> -->
        <mt-swipe :auto="4000">
          <mt-swipe-item class="slide1">
            <img src="../../assets/shouye.png" alt="" @click="isShowSwi">
          </mt-swipe-item>
          <mt-swipe-item class="slide2">
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2473328042,19104475&fm=26&gp=0.jpg"  @click="isShowSwi">
          </mt-swipe-item>
          <mt-swipe-item class="slide3">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547184675737&di=f54da6d4371ebce860a882e958b45c87&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F015c435ac2e89ba80121257399760a.jpg%401280w_1l_2o_100sh.jpg" alt=""
             @click="isShowSwi">
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="quan">
        <img src="../../assets/quan1.png" alt="">
      </div>
      <div class="title">柜机内商品</div>
      <div class="list">
        <div class="li">
          <div class="img" @click="isHide">
            <img src="../../assets/del2.png" alt="">
            <img src="../../assets/rexiao.png" alt="">
          </div>
          <p>护理型牙刷（深洁型）2支装 一万根刷毛的牙刷</p>
          <div class="span">纳米，普通刷头，多支装</div>
          <div class="total">
            <div class="price">
              <div class="yuanjia">￥46.80</div>
            </div>
            <div @click="isChoose(id=1)" class="handle">
              <div class="btn" v-if="isBuy">选购</div>
              <div class="yixuan" v-if="!isBuy">已选购</div>
            </div>
          </div>
          <div class="xx"></div>
        </div>
        <div class="li">
          <div class="img" @click="isHide">
            <img src="../../assets/del2.png" alt="">
            <img src="../../assets/manjian.png" alt="">
          </div>
          <p>护理型牙刷（深洁型）2支装 一万根刷毛的牙刷</p>
          <div class="span">纳米，普通刷头，多支装</div>
          <div class="total">
            <div class="price">
              <div class="yuanjia">￥46.80</div>
              <del>￥34.32</del>
            </div>
            <div @click="isChoose(id=2)" class="handle">
              <div class="btn" v-if="isBuy">选购</div>
              <div class="yixuan" v-if="!isBuy">已选购</div>
            </div>
          </div>
          <div class="xx"></div>
        </div>
        <div class="li">
          <div class="img" @click="isHide">
            <img src="../../assets/del2.png" alt="">
            <img src="../../assets/manjian.png" alt="">
          </div>
          <p>护理型牙刷（深洁型）2支装 一万根刷毛的牙刷</p>
          <div class="span">纳米，普通刷头，多支装</div>
          <div class="total">
            <div class="price">
              <div class="yuanjia">￥46.80</div>
              <del>￥34.32</del>
            </div>
            <div @click="isChoose(id=3)" class="handle">
              <div class="btn" v-if="isBuy">选购</div>
              <div class="yixuan" v-if="!isBuy">已选购</div>
            </div>
          </div>
          <div class="xx"></div>
        </div>
      </div>
      <div class="tips">非质量问题，商品一旦售出概不退换</div>
      <!-- 轮播图弹窗 -->
      <div class="swi" v-if="isSwi" @click="hideSwi">
        <div class="pe">
          <img src="../../assets/del2.png" alt="">
          <div class="nei">
            <h3>南极人（Nanjiren）文胸 无钢圈</h3>
            <div class="ss">舒适就是这么简单</div>
            <div class="pp">￥89.00</div>
          </div>
          <div class="btnn" @click="lijiHide">立即预定</div>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="detail" v-if="isDetail">
        <div class="del">
          <div class="top">
            <p>已选商品</p>
            <div class="span">
              <img src="../../assets/qingkong.png" alt="">
              <p>清空</p>
            </div>
          </div>
          <div class="ul">
            <div class="sp">
              <div class="left">
                <img src="../../assets/del2.png" alt="">
                <div class="txt">
                  <h4>南极人睡衣女冬季法兰绒加厚</h4>
                  <p>￥89.00</p>
                </div>
              </div>
              <div class="right">
                <img src="../../assets/shanchu.png" alt="">
              </div>
            </div>
            <div class="sp">
              <div class="left">
                <img src="../../assets/del1.png" alt="">
                <div class="txt">
                  <h4>杜蕾斯 避孕套 男用 安全套超…</h4>
                  <p>￥59.00</p>
                </div>
              </div>
              <div class="right">
                <img src="../../assets/shanchu.png" alt="">
              </div>
            </div>
            <div class="sp">
              <div class="left">
                <img src="../../assets/del1.png" alt="">
                <div class="txt">
                  <h4>杜蕾斯 避孕套 男用 安全套超…</h4>
                  <p>￥59.00</p>
                </div>
              </div>
              <div class="right">
                <img src="../../assets/shanchu.png" alt="">
              </div>
            </div>
            <div class="sp">
              <div class="left">
                <img src="../../assets/del1.png" alt="">
                <div class="txt">
                  <h4>杜蕾斯 避孕套 男用 安全套超…</h4>
                  <p>￥59.00</p>
                </div>
              </div>
              <div class="right">
                <img src="../../assets/shanchu.png" alt="">
              </div>
            </div>
            <div class="sp">
              <div class="left">
                <img src="../../assets/del1.png" alt="">
                <div class="txt">
                  <h4>杜蕾斯 避孕套 男用 安全套超…</h4>
                  <p>￥59.00</p>
                </div>
              </div>
              <div class="right">
                <img src="../../assets/shanchu.png" alt="">
              </div>
            </div>
            <div class="sp">
              <div class="left">
                <img src="../../assets/del1.png" alt="">
                <div class="txt">
                  <h4>杜蕾斯 避孕套 男用 安全套超…</h4>
                  <p>￥59.00</p>
                </div>
              </div>
              <div class="right">
                <img src="../../assets/shanchu.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <div class="left">
          <img src="../../assets/gouwuche.png" @click="listShow">
          <span>￥0.00</span>
          <div class="count" v-if="count !== '0' ? true : false">{{count}}</div>
        </div>
        <div class="right" @click="settlement">去结算</div>
      </div>
    </div>
    <!-- 提示消息 -->
    <div class="error" v-if="isError">亲爱的，您还没有选购商品哦~</div>
    <!-- 放大图 -->
    <div class="motai" v-if="!isScal">
      <div class="img">
        <img src="../../assets/del2.png" alt="">
      </div>
      <div class="ret" @click="isReturn">
        <img src="../../assets/fanhui.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe } from 'mint-ui'
Vue.component(Swipe)

export default {
  name: 'Shopping',
  data () {
    return {
      isScal: true,
      isDetail: false,
      isBuy: true,
      count: '0',
      isError: false,
      isSwi: false
    }
  },
  methods: {
    isHide () {
      this.isScal = false
    },
    isReturn () {
      this.isScal = true
    },
    listShow () {
      this.isDetail = !this.isDetail
    },
    isChoose (e) {
      this.isBuy = !this.isBuy
      if (!this.isBuy) {
        this.count++
      } else if (this.isBuy) {
        this.count--
      }
    },
    settlement () {
      console.log(this.count)
      const count = this.count
      if (count === '0') {
        this.isError = true
        var _this = this
        setTimeout(function () {
          _this.isError = false
        }, 1000)
      } else {
        this.$router.push({name: 'Confirm'})
      }
    },
    isShowSwi () {
      this.isSwi = true
    },
    lijiHide () {
      this.isSwi = false
    },
    hideSwi (e) {
      console.log('mmm')
      e.stopPropagation()
      this.isSwi = false
    }
  },
  created () {
    document.title = '选好货'
  }
}
</script>

<style lang='scss' scoped>
#shopping{
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: #fff;
  .all{
    .banner{
      height: 42.66vw;
      position: relative;
      .mint-swipe {
        height: 42.66vw;
        color: #fff;
        font-size: 4vw;
        text-align: center;
        margin-bottom: 2.66vw;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .mint-swipe-item {
        line-height: 42.66vw;
      }
      .slide2 {
        background-color: #ffd705;
        color: #000;
      }
      .slide3 {
        background-color: #ff2d4b;
        color: #fff;
      }
    }
    .quan{
      height: 27.46vw;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0.5px solid #eee;
      img{
        width: 95.73vw;
        height: 21.33vw;
      }
    }
    .title{
      height: 13.06vw;
      padding: 0 3.46vw;
      line-height: 13.06vw;
      font-size: 5.06vw;
      font-family:SourceHanSansCN-Bold;
      font-weight:bold;
      color:rgba(22,22,22,1);
    }
    .list{
      .li{
        height: 130.13vw;
        padding: 8vw 10.66vw 5.33vw 10.66vw;
        box-sizing: border-box;
        .img{
          width: 78.66vw;
          height: 78.66vw;
          position: relative;
          img{
            &:nth-of-type(1){
              width: 100%;
              height: 100%;
            }
            &:nth-of-type(2){
              width: 16.53vw;
              height: 16.53vw;
              z-index: 10;
              position: absolute;
              top: 0;
              left: 0;
            }
          }
        }
        p{
          font-size: 5.06vw;
          font-family:SourceHanSansCN-Bold;
          font-weight:bold;
          color:rgba(22,22,22,1);
          line-height: 6.4vw;
          margin-top: 4vw;
        }
        .span{
          font-size: 3.73vw;
          font-family:SourceHanSansCN-Regular;
          font-weight:400;
          color:rgba(168,168,168,1);
          margin-top: 4vw;
          margin-bottom: 1.2vw;
        }
        .total{
          height: 13.6vw;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .price{
            display: flex;
            align-items: flex-end;
            .yuanjia{
              font-size: 4.8vw;
              font-family:SourceHanSansCN-Bold;
              font-weight:bold;
              color:rgba(255,0,0,1);
              margin-right: 1.86vw;
            }
            del{
              font-size: 3.5vw;
              font-family:SourceHanSansCN-Regular;
              font-weight:400;
              color:rgba(168,168,168,1);
              margin-top: 1vw;
            }
          }
          .handle{
            .btn{
              width: 21.06vw;
              height: 8.26vw;
              background:linear-gradient(90deg,rgba(255,124,7,1) 0%,rgba(255,0,0,1) 100%);
              border-radius: 4.66vw;
              text-align: center;
              line-height: 8.26vw;
              font-size: 4vw;
              font-family:SourceHanSansCN-Regular;
              font-weight:400;
              color:rgba(255,255,255,1);
            }
            .yixuan{
              text-align: center;
              line-height: 8.26vw;
              width: 21.06vw;
              height: 8.26vw;
              background:rgba(216,216,216,1);
              border-radius: 4.66vw;
              font-size: 4vw;
              font-family:SourceHanSansCN-Regular;
              font-weight:400;
              color:rgba(255,255,255,1);
            }
          }
        }
        .xx{
          width: 78.66vw;
          height: 1px;
          background-color: #eee;
          margin-top: 3.5vw;
        }
      }
    }
    .tips{
      height: 13.86vw;
      text-align: center;
      line-height: 13.86vw;
      font-size: 3.2vw;
      font-family:SourceHanSansCN-Regular;
      font-weight:400;
      color:rgba(176,199,233,1);
      margin-bottom: 15vw;
    }
  }
  .swi{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background:rgba(0,0,0,0.5);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    .pe{
      width: 78.66vw;
      height: 117.06vw;
      background-color: #fff;
      border-radius: 2.13vw;
      img{
        width: 78.66vw;
        height: 78.66vw;
        border-radius: 2.13vw 2.13vw 0 0;
      }
      .nei{
        height: 26.13vw;
        background-color: #fff;
        box-sizing: border-box;
        padding: 4vw 3.46vw;
        h3{
          font-size: 4.26vw;
          font-family:SourceHanSansCN-Bold;
          font-weight:bold;
          color:rgba(22,22,22,1);
          line-height: 6.4vw;
        }
        .ss{
          font-size: 2.93vw;
          font-family:SourceHanSansCN-Regular;
          font-weight:400;
          color:rgba(168,168,168,1);
          line-height: 4.4vw;
          margin: 1vw 0;
        }
        .pp{
          font-size: 4.26vw;
          font-family:SourceHanSansCN-Bold;
          font-weight:bold;
          color:rgba(255,0,0,1);
          line-height: 6.4vw;
        }
      }
      .btnn{
        height: 12.26vw;
        background:linear-gradient(90deg,rgba(255,124,7,1) 0%,rgba(255,0,0,1) 100%);
        border-radius: 0 0 2.13vw 2.13vw;
        text-align: center;
        line-height: 12.26vw;
        font-size: 4.53vw;
        font-family:SourceHanSansCN-Bold;
        font-weight:bold;
        color:rgba(255,255,255,1);
      }
    }
  }
  .detail{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background:rgba(0,0,0,0.5);
    z-index: 80;
    border-radius: 2.16vw 2.16vw 0 0;
    .del{
      position: absolute;
      width: 100vw;
      bottom: 14.66vw;
      border-radius: 2.13vw 2.13vw 0px 0px;
      background-color: #fff;
      .top{
        height: 14.66vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 3.46vw;
        border: 0.5px solid #eee;
        border-radius: 2.13vw 2.13vw 0px 0px;
        p{
          font-size: 3.73vw;
          font-family:SourceHanSansCN-Regular;
          font-weight:400;
          color:rgba(134,134,134,1);
          }
        .span{
          display: flex;
          align-items: center;
          img{
            width: 2.93vw;
            height: 3.73vw;
            margin-right: 1.33vw;
          }
        }
      }
      .ul{
        max-height: 105.3vw;
        overflow: scroll;
        .sp{
          height: 21.06vw;
          padding: 0 3.46vw;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left{
            display: flex;
            img{
              width: 13.06vw;
              height: 13.06vw;
              margin-right: 2vw;
            }
            .txt{
              h4{
                font-size: 4.53vw;
                font-family:SourceHanSansCN-Regular;
                font-weight:400;
                color:rgba(22,22,22,1);
                margin-bottom: 2.66vw;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                height: 4.53vw;
              }
              p{
                font-size: 3.2vw;
                font-family:SourceHanSansCN-Regular;
                font-weight:400;
                color:rgba(255,0,0,1);
              }
            }
          }
          .right{
            img{
              width: 5.86vw;
              height: 5.86vw;
            }
          }
        }
      }
    }
  }
  .bottom{
    height: 14.66vw;
    display: flex;
    position: fixed;
    bottom: 0;
    z-index: 100;
    .left{
      width: 68vw;
      line-height: 14.86vw;
      background:rgba(54,54,54,1);
      img{
        width: 14.66vw;
        height: 14.66vw;
        position: absolute;
        bottom: 1.6vw;
        left: 3.46vw;
      }
      span{
        font-size: 4.8vw;
        font-family:SourceHanSansCN-Bold;
        font-weight:bold;
        color:rgba(255,255,255,1);
        position: relative;
        margin-left: 20.8vw;
      }
      .count{
        // width: 4.53vw;
        height: 3.73vw;
        padding: 0 0.93vw;
        background:linear-gradient(90deg,rgba(255,124,7,1) 0%,rgba(255,0,0,1) 100%);
        border-radius: 1.86vw;
        position: absolute;
        top: -2vw;
        left: 13.6vw;
        font-size: 3.2vw;
        text-align: center;
        line-height: 3.73vw;
        font-family: SourceHanSansCN-Regular;
        font-weight: 400;
        color:rgba(255,255,255,1);
      }
    }
    .right{
      width: 31.73vw;
      background:linear-gradient(90deg,rgba(255,124,7,1) 0%,rgba(255,0,0,1) 100%);
      text-align: center;
      line-height: 14.66vw;
      font-size: 4.53vw;
      font-family:SourceHanSansCN-Regular;
      font-weight:400;
      color:rgba(255,255,255,1);
    }
  }
  .error{
    width: 84vw;
    height: 10.4vw;
    background:rgba(0,0,0,0.8);
    border-radius: 0.53vw;
    position: absolute;
    top: 74vw;
    left: 8vw;
    font-size: 4.26vw;
    font-family: SourceHanSansCN-Regular;
    font-weight: 400;
    color: rgba(255,255,255,1);
    text-align: center;
    line-height: 10.4vw;
  }
  .motai{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
    .img{
      width: 100%;
      height: 99.73vw;
      position: absolute;
      top: 33.73vw;
      left: 0;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .ret{
      width: 5.86vw;
      height: 5.86vw;
      position: absolute;
      left: 4.8vw;
      bottom: 8vw;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
